<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/helps.css">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../css/footer.css"/>
	<link rel="stylesheet" type="text/css" href="../css/head.css">
	<script src="../build/react.js"></script>
	<script src="../build/react-dom.js"></script>
	<script src="../build/browser.min.js"></script>
	<script src="../build/jquery.min.js"></script>
	<script src="../build/jquery-ui.min.js"></script>
	<title>helps</title>

</head>
<body>
	<header>
		<div class="header_top">
			<div class="header_log">
				<img src="../img/logo.png" alt="图片不在了">
			</div>
			
			<ul>
				<li id="product"><a href="">产品<i class="icon iconfont">&#xe60a;</i></a></li>
				<li id="help"><a href="">帮助中心<i class="icon iconfont">&#xe60a;</i></a></li>
				<li id="cooperation"><a href="">合作<i class="icon iconfont">&#xe60a;</i></a></li>
				<li id="news"><a href="../news/news.html">新闻</a></li>
				<li id="about-us"><a href="../aboutus/aboutus.html">关于我们</a></li>
				<li class="navright" id="language"><a href="">语言<i class="icon iconfont">&#xe60a;</i></a></li>
				<li class="navright" id="login"><a href="">登录<i class="icon iconfont">&#xe60a;</i></a></li>
			</ul>
		
		</div>
		<div id="language-block" class="language-updown">
		</div>
		<div id="language-style" class="language-updown">
			<a href="" style="text-decoration: none;"><p>English</p></a>
			<a href="" style="text-decoration: none;"><p>中文</p></a>
		</div>
		
		<div id="login-block" class="login-updown">
		</div>
		<div id="login-style" class="login-updown">
			<a href="" style="text-decoration: none;"><p>登录</p></a>
			<a href="" style="text-decoration: none;"><p>忘记密码</p></a>
		</div>
		
		<div id="product-block" class="product-updown">
		</div>
		<div id="product-block-img" class="product-updown">
			<img src="../img/boke1.jpg"/>
			<img src="../img/banner_sdeno.png"/>
			<img src="../img/slide-01.jpg"/>
		</div>
		<div id="product-block-hover" class="product-updown">
			<a href="../product/product-littlemi.html"><div>小觅防丢器</div></a>	
			<a href="../product/product-robot.html"><div>小觅机器人</div></a>
			<a href="../product/product-life.html"><div>私生活app</div></a>
		</div>
		<div id="help-block"  class="help-updown">
			
		</div>
		<div id="help-block-img"  class="help-updown">
			<img src="../img/boke1.jpg"/>
		</div>
		<div id="help-block-hover"  class="help-updown">
			<a href="../helps/helps.html"><div>小觅常见问题</div></a>	
		</div>
		<div id="cooperation-block" class="cooperation-updown">
			
		</div>
		<div id="cooperation-block-img" class="cooperation-updown">
			<img src="../img/sdk_slide.jpg"/>
			<img src="../img/solution_slide.jpg"/>
			<img src="../img/gift_mynt_light.png"/>
		</div>
		<div id="cooperation-block-hover" class="cooperation-updown">
			<a href="../cooperate/developer.html"><div>开发者方案</div></a>
			<a href="../cooperate/solution.html"><div>防丢产品解决方案</div></a>
			<a href="../cooperate/customize.html"><div>企业礼品定制</div></a>
		</div>
	</header>
	<div id="cover"></div>
	<div id="emailinfo">
		<div><span>期待你的来信</span></div>
		<div>
			<form action="../news/news.html" method="get" >
				<table>
					<tr >
						<td>
							<font color="red">*</font>必要信息
						</td>	
					</tr>
					<tr >
						<td>
							姓名<font color="red">*</font>
						</td>
						<td>
							电子邮箱<font color="red">*</font>
						</td>	
					</tr>
					<tr >
						<th>
							<input type="text" id="username" name="username">
						</th>
						<th>
							<input type="text" id="ema" name='email'>
						</th>	
					</tr>
					<tr >
						<td>
							主题
						</td>
					</tr>
					<tr >
						<th colspan="2" style="width:100%;">
							<input type="text" id="tit" name="title">
						</th>	
					</tr>
					<tr >
						<td>
							内容<font color="red">*</font>
						</td>
					</tr>
					<tr >
						<th colspan="2" style="width:100%;">
							<textarea name="content" id="con" cols="30" rows="10"></textarea>
						</th>
					</tr>
					<tr>
						<th></th>
						<th class="tijiao">
						
							<button id="sub" type="submit">发送</button>
							<button type="button" id="close">返回</button>
						</th>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<div id="contentimg">
		<div class="wenti">
			<h1>常见问题</h1>
			<p>小觅防丢常见问题</p>
		</div>
	</div>
	<div id="container">
		
	</div>
	<div id="email">
		<div class="mengban"></div>
		<div class="youjian">
			<h1>找不到您要的答案?</h1>
			<div id="emailclick">写邮件给我们</div>
		</div>
	</div>
	<!--------------页脚社区友情链接及相关-->
			<footer>
				<!----商业合作咨询邮件----------->
				<div class="email_container">
					<section class="cooper_email">
						<h1>商业合作相关咨询,请发邮件给我们</h1>
						<h3>输入您的邮箱并点击订阅,我们会及时推送更新和新服务</h3>
						<div id="subscribeForm">
							<div class="email_input">
							<input type="text" name="e_mail" id="e_mail" value="" />	
							<input id="subscribe" type="submit" value="订阅"/>
							</div>								
						</div>
						
					</section>
				</div>
				<!---------社区及相关-->
				<div class="revevance_container">
					<section class="revevance_con">
						<section class="chain_row">
							<section class="row_left">
								<li><a href="###">社区</a></li>
								<li><a href="###">博客</a></li>
								<li><a href="###">新闻</a></li>
								<li><a href="###">帮助中心</a></li>
								<li><a href="###">关于我们</a></li>
							</section>
							<section class="row_right">
								<li><a href="###"></a></li>
								<li><a href="###"></a></li>
								<li><a href="###"></a></li>
								<li><a href="###"></a></li>
								<li><a href="###"></a></li>
							</section>
						</section>
						<p>Copyright © 2014 - 2016 Slightech, Inc. All Rights Reserved. 苏ICP备15025307号-1</p>
					</section>
				</div>
			</footer>

	<script type="text/babel">
		$(function(){
		$("#product").mouseenter(function(){
			$(".product-updown").slideToggle("slow");
			$(".help-updown").slideUp("slow");
			$(".cooperation-updown").slideUp("slow");
			$(".language-updown").slideUp("slow");
			$(".login-updown").slideUp("slow");
		});
		$("#help").mouseenter(function(){
			$(".help-updown").slideToggle("slow");
			$(".product-updown").slideUp("slow");
			$(".cooperation-updown").slideUp("slow");
			$(".language-updown").slideUp("slow");
			$(".login-updown").slideUp("slow");
		});
		$("#cooperation").mouseenter(function(){
			$(".cooperation-updown").slideToggle("slow");
			$(".help-updown").slideUp("slow");
			$(".product-updown").slideUp("slow");
			$(".language-updown").slideUp("slow");
			$(".login-updown").slideUp("slow");
		});
		$("#language").mouseenter(function(){
			$('.language-updown').slideToggle("slow");
			$(".help-updown").slideUp("slow");
			$(".product-updown").slideUp("slow");
			$(".cooperation-updown").slideUp("slow");
			$(".login-updown").slideUp("slow");
		});
		$("#login").mouseenter(function(){
			$('.login-updown').slideToggle("slow");
			$(".help-updown").slideUp("slow");
			$(".product-updown").slideUp("slow");
			$(".cooperation-updown").slideUp("slow");
			$(".language-updown").slideUp("slow");
		});

	});
	
	var Datas=[
	{

		"title":"如何判断我的手机.电脑等设备是否支持?",
		"text":"继在全球各大众筹平台获得佳绩，并持续位列太火鸟（taihuoniao.com)<h4>TOP100智能硬件评选第1名后</h4>，硅谷智能科技公司Slightech, Inc.的智能防丢器小觅又赢得了国际工业设计“奥斯卡”——德国“红点奖”2016产品设计奖",

},
{

	"title":"如何安装小觅App?",
	"text":"据Slightech Inc. (轻客科技)最新统计数据显示，他们独立研发的智能防丢器—小觅（MYNT）自8月18日、8月25日登陆京东众筹和Indiegogo以来，众筹金额已累计突破100万元，众筹参与人数超过8000人，一举刷新了中国可穿戴防丢智能硬件众筹金额和人数的历史",

},
{

	"title":"小觅是如何工作的",
	"text":"北京时间3月16日讯，Nvidia英伟达宣布旗下首款针对深度学习神经网络而设计的嵌入式开发板Jetson TX1将登陆中国区市场。据悉，全新的Jetson TX1基于Tegra X1打造，采用最新的Maxwell架构，拥有256个GPU核心",

},
{
	
	"title":"如何判断我的手机.电脑等设备是否支持?",
	"text":"继在全球各大众筹平台获得佳绩，并持续位列太火鸟（taihuoniao.com)<h4>TOP100智能硬件评选第1名后</h4>，硅谷智能科技公司Slightech, Inc.的智能防丢器小觅又赢得了国际工业设计“奥斯卡”——德国“红点奖”2016产品设计奖",

},
{

	"title":"如何安装小觅App?",
	"text":"据Slightech Inc. (轻客科技)最新统计数据显示，他们独立研发的智能防丢器—小觅（MYNT）自8月18日、8月25日登陆京东众筹和Indiegogo以来，众筹金额已累计突破100万元，众筹参与人数超过8000人，一举刷新了中国可穿戴防丢智能硬件众筹金额和人数的历史",

},
{

	"title":"小觅是如何工作的",
	"text":"北京时间3月16日讯，Nvidia英伟达宣布旗下首款针对深度学习神经网络而设计的嵌入式开发板Jetson TX1将登陆中国区市场。据悉，全新的Jetson TX1基于Tegra X1打造，采用最新的Maxwell架构，拥有256个GPU核心",

},
{
	
	"title":"如何判断我的手机.电脑等设备是否支持?",
	"text":"继在全球各大众筹平台获得佳绩，并持续位列太火鸟（taihuoniao.com)<h4>TOP100智能硬件评选第1名后</h4>，硅谷智能科技公司Slightech, Inc.的智能防丢器小觅又赢得了国际工业设计“奥斯卡”——德国“红点奖”2016产品设计奖",

},
{

	"title":"如何安装小觅App?",
	"text":"据Slightech Inc. (轻客科技)最新统计数据显示，他们独立研发的智能防丢器—小觅（MYNT）自8月18日、8月25日登陆京东众筹和Indiegogo以来，众筹金额已累计突破100万元，众筹参与人数超过8000人，一举刷新了中国可穿戴防丢智能硬件众筹金额和人数的历史",

},
{

	"title":"小觅是如何工作的",
	"text":"北京时间3月16日讯，Nvidia英伟达宣布旗下首款针对深度学习神经网络而设计的嵌入式开发板Jetson TX1将登陆中国区市场。据悉，全新的Jetson TX1基于Tegra X1打造，采用最新的Maxwell架构，拥有256个GPU核心",

}
];
var NewContent=React.createClass({

	render : function () {
		var NewArticles=[];
		Datas.forEach(function (value,index) {
			NewArticles.push(<NewArticle key={index} data={value}/>)

		});
		return ( 
			<div id="content">
			{NewArticles}
			</div>
			)

	}
});

var NewArticle=React.createClass({

	render : function () {
		var data=this.props.data;
		return (
			<article className="newarticle">
			<div className="title">
			<span>{data.title}</span>
			<span className="de"><i className="icon iconfont">&#xe605;</i></span>
			<span className="de1"><i className="icon iconfont">&#xe69c;</i></span>
			</div>
			<div className="text"  dangerouslySetInnerHTML={{__html: data.text}}></div>
			</article>
			)
	}
})

ReactDOM.render(<NewContent/>,document.getElementById('container'));

$(function(){
	var a=$(".title").children(".de").html();
	var b=$(".title").children(".de1").html();
	$(".title").on("click",function(){
		if($(this).next().css('display')=="none"){

			$(".text").slideUp("fast");
			$(".title").children(".de").html(a);
			$(".title").parent().animate({backgroundColor:'white'});
			$(".title").css({color:"black"});
			$(this).parent().animate({backgroundColor:'rgb(250,250,250)'});
			$(this).next().slideDown("fast");
			$(this).children(".de").html(b);
			$(this).css({color:"#00adee"});

		}else{
			$(this).next().slideUp("fast");
			$(this).css({color:"black"})
			$(this).children().eq(1).html(a);
			$(this).parent().animate({backgroundColor:'white'});

		}
	});
	$(".title").mouseover(function(){
		if($(this).next().css('display')=="none"){

			$(this).css({color:'#8fc53c'});
		}
	});
	$(".title").mouseout(function(){
		if($(this).next().css('display')=="none"){
			$(this).css({color:'black'});
		}

	});
	$("#emailclick").click(function(){
		$("#emailinfo").slideDown();
		$("#cover").show();

	});
	$("#close").click(function(){
		
		$("#emailinfo").slideUp();
		$("#cover").css("display","none");

	});
	//表单验证
	function check(){
		var regemail= /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
		if(!($("#username").val())){
			alert("姓名不能为空!")		
			return false;
		}
		if(!($("#ema").val())){
			alert("邮箱不能为空!")
			return false;
		}
		if(!(regemail.test($("#ema").val()))){
			alert("请输入有效邮箱!")
			return false;
		}
		if(!($("#con").val())){
			alert("内容不能为空!")
			return false;
		}

	};
	$("#sub").click(function(){
		return check();
	});
});
</script>
</body>
</html>